<template>
	<section class="small_adress">
		<div class="search">
			<el-input v-model="inputBrans" placeholder="搜索部门"></el-input>
			<el-button type="success" @click = "searchBrans">搜索</el-button>
		</div>
		
		<div class="detail">
			<p class="top_title"><span v-for="(item,index) in totelTitle" @click="changeBrans(item.orgSerialNo)">{{item.name}} <i v-if="index!=totelTitle.length-1" > > </i></span></p>
			
			<div class="brans">
				<ul><!--部门-->
					<li v-for="item in details.brans" >
						<span  class="choose_btn" style="width: 15px;height: 15px;" @click="chooseBrans(item.orgSerialNo,item.name)">选择</span>
						<span @click="changeBrans(item.orgSerialNo)" style="width: 320px;display: inline-block;">{{item.name}}</span>
						<span @click="changeBrans(item.orgSerialNo)" style="float: right;margin-right: 15px;font-size: 15px;">></span>
					</li>
				</ul>
				
			</div>
		
		</div>
		
	</section>
</template>

<script>
		import headImg from '../../../images/app_user.png'
		import {apiBrans,apiChangeBrans,getParam,apiSearchBrans} from '../css_img_js/xieTongApi.js'
		export default{
			data(){
				return{
					totelTitle:[
						
					],
					details:{
						brans:[
						
						],
					},
					choosedBran:'',
					inputBrans:'',
				}
			},
			methods:{
				changeBrans(val){/*改变部门*/
					apiChangeBrans(this,val);
				},
				chooseBrans(val,name){/*选择部门*/
					this.$emit("chooseBrans",{bransId:val,bransname:name})
				},
				searchBrans(){/*搜索部门*/
					if(this.inputBrans!=''){
						apiSearchBrans(this,this.inputBrans);
					}else{
						apiBrans(this);
					}
					
				}
			},
			mounted(){
//				console.log(getParam);
				apiBrans(this);
			}
		}
</script>

<style scoped>
	.small_adress{
		width: 100%;
		height: 450px;
		overflow: hidden;
		border: solid 1px #EEEEEE;
		border-radius: 4px;
		box-sizing: border-box;
	}
	.search {
		padding: 10px;
		border-bottom: solid 1px #EEEEEE;
		position: relative;
	}
	.search button{
		   top: 10px;
		    position: absolute;
		    right: 10px;
	}
	.top_title{
		    padding: 15px;
		    font-size: 17px;
		    /*color: #428de9;*/
		    border-bottom: solid 1px #EEEEEE;
	}
	.top_title span:last-child{
		color: #428de9;
	}
	li{
		    height: 44px;
		    padding-left: 15px;
		    font-size: 15px;
		    color: #333333;
		    line-height: 44px;
		    cursor: pointer;
	}
	li:hover{
		background: #eeeeee;
	}
	li img{
		height: 38px;
		width: 38px;
		vertical-align: middle;
		margin-right: 5px;
	}
	.brans{
		height: 333px;
		overflow-x: hidden;
		overflow-y: scroll;
	}
	.choose_btn{
			    width: 15px;
    height: 15px;
    background: #409eff;
    color: white;
    padding: 5px;
    font-size: 15px;
    border-radius: 4px;
	}

	
	/*滚动条美化*/
	::-webkit-scrollbar {
    width: 6px;
    padding-right: 4px;
    background-color: #B3B3B3; 
    /*其他样式，比如圆角等*/
}
/*滑块样式*/
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: #428de9; 
}

</style>